<template>
  <div style="padding: 16px 24px">
    <div class="info-tip">
      <div>{{ $t("机器人作为Slave从站服务端时") }}</div>
      <div>
        {{
          $t("响应第三方Master的读指令返回所查询的巡检对象最近一次的巡检结果")
        }}
      </div>
      <div>
        {{
          $t(
            "响应第三方Master的写指令自动生成指令数据中所包含的巡检对象的巡检任务并执行可多个巡检对象1个巡检认任务"
          )
        }}
      </div>
      <div>
        {{
          $t(
            "（3）支持数据透传：第三方Slaver的数据<->机器人Master<->机器人Slave<->第三方Master"
          )
        }}
      </div>
    </div>
    <div class="mt-12">
      <div class="info-box" style="align-items: flex-start">
        <div class="info-titlt">
          {{ $t("协议类型") }}
        </div>
        <div
          class="p-8 ml-8"
          style="border: 1px solid #00d1ff; width: 148px; height: 90px"
        >
          <div style="font-weight: bold; color: #ffffff" class="mb-8">
            Modbus TCP
          </div>
          <span style="color: #a6acb1" class="fs-14">{{
            tcpSwitch ? "启用：" : "禁用："
          }}</span>
          <el-switch v-model="tcpSwitch"> </el-switch>
        </div>
      </div>
    </div>
    <div class="mt-12">
      <div class="info-box mb-8">
        <div class="info-titlt mr-5">
          {{ $t("Modbus TCP Slave 配置") }}
        </div>
        <div
          style="
            height: 1px;
            flex: 1;
            border-top: 1px dashed rgba(219, 255, 251, 0.2);
          "
        ></div>
      </div>
    </div>
    <div>
      <div class="form">
        <el-form
          :model="setListQuery"
          :rules="setListRules"
          ref="setListQuery"
          size="small"
          :inline="true"
        >
          <el-form-item
            required
            style="display: block"
            :label="$t('端口号') + '：'"
          >
            <el-input-number
              controls-position="right"
              :disabled="editFlag"
              v-model="setListQuery.port"
              :placeholder="$t('请输入')"
              clearable
              :min="1"
              :max="65535"
              size="medium"
              style="width: 190px"
            />
            <label style="color: #a6acb1">（1~65535）</label>
          </el-form-item>
          <el-form-item required :label="$t('站地址') + '：'">
            <el-input-number
              controls-position="right"
              :disabled="editFlag"
              v-model="setListQuery.address"
              :placeholder="$t('请输入')"
              clearable
              :min="1"
              :max="255"
              size="medium"
              style="width: 190px"
            />
            <label style="color: #a6acb1">（1~255）</label>
          </el-form-item>
          <el-form-item
            style="display: block"
            :label="$t('16位整数字节序') + '：'"
          >
            <span style="color: #fff">AB</span>
          </el-form-item>
          <el-form-item
            style="display: block"
            :label="$t('32位整数字节序') + '：'"
          >
            <span style="color: #fff">ABCD</span>
          </el-form-item>
          <el-form-item
            style="display: block"
            :label="$t('32位浮点数字节序') + '：'"
          >
            <span style="color: #fff">ABCD</span>
          </el-form-item>
          <el-form-item required :label="$t('最大连接数') + '：'">
            <el-input-number
              controls-position="right"
              :min="1"
              :max="32"
              :disabled="editFlag"
              v-model="setListQuery.maxNum"
              :placeholder="$t('请输入')"
              clearable
              size="medium"
              style="width: 190px"
            />
            <label style="color: #a6acb1">（1~32）</label>
          </el-form-item>
        </el-form>
      </div>
      <div class="btns" style="margin-left: 105px">
        <div v-if="editFlag" @click="editBtn" class="serch-btn cuver-point">
          {{ $t("编辑") }}
        </div>
        <div
          v-if="!editFlag"
          style="display: inline-block"
          @click="saveBtn"
          class="serch-btn cuver-point mr-6"
        >
          {{ $t("保存") }}
        </div>
        <div
          v-if="!editFlag"
          style="display: inline-block"
          @click="cancelBtn"
          class="reset-btn cuver-point"
        >
          {{ $t("取消") }}
        </div>
      </div>
    </div>
    <div class="mt-12">
      <div class="info-box mb-8">
        <div class="info-titlt mr-5">
          {{ $t("Modbus 映射表") }}
        </div>
        <div
          style="
            height: 1px;
            flex: 1;
            border-top: 1px dashed rgba(219, 255, 251, 0.2);
          "
        ></div>
      </div>
      <div class="search-area">
        <div class="form">
          <el-form
            :model="listQuery"
            ref="listQuery"
            size="small"
            :inline="true"
            label-width="115px"
          >
            <el-form-item :label="$t('巡检对象名称') + ':'" prop="deviceName">
              <el-input
                v-model="listQuery.deviceName"
                :placeholder="$t('请输入')"
                clearable
                size="medium"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item :label="$t('数据类型') + ':'" prop="dataType">
              <el-select
                v-model="listQuery.dataType"
                :placeholder="$t('请选择')"
                clearable
                size="medium"
              >
                <el-option
                  v-for="item in dataTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item :label="$t('Modbus点号') + ':'" prop="pointNumber">
              <el-input
                v-model="listQuery.pointNumber"
                :placeholder="$t('请输入')"
                clearable
                size="medium"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item :label="$t('映射类型') + ':'" prop="mappTyle">
              <el-select
                v-model="listQuery.dataType"
                :placeholder="$t('请选择')"
                clearable
                size="medium"
              >
                <el-option
                  v-for="item in mappList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="search-area-btn btns">
          <div @click="serachBtn" class="serch-btn cuver-point">
            {{ $t("搜索") }}
          </div>
          <div @click="resetFormBtn('listQuery')" class="reset-btn cuver-point">
            {{ $t("重置") }}
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <div class="self">
          <div class="btns">
            <div @click="addMap" class="serch-btn cuver-point table-top">
              {{ $t("新增") }}
            </div>
          </div>
          <el-table
            ref="tableRef"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%; margin-top: 16px"
          >
            <el-table-column
              align="center"
              prop="resourceId"
              :label="$t('点位名/巡检对象名称')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="createTime"
              :label="$t('类别/巡检点名称')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="createTime"
              :label="$t('映射类型')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="createTime"
              :label="$t('单位')"
            >
            </el-table-column>
            <el-table-column
              align="center"
              prop="createTime"
              :label="$t('Modbus点号')"
            >
            </el-table-column>
            <el-table-column :label="$t('操作')" align="center">
              <template slot-scope="scope">
                <div class="table-btns">
                  <div
                    @click="editRow(scope.row)"
                    class="serch-btn cuver-point"
                  >
                    {{ $t("编辑") }}
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagenation">
          <pagination
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            @pagination="getTableList"
          >
          </pagination>
        </div>
      </div>
    </div>
    <!-- <el-drawer
      :title="$t('新增')"
      :visible.sync="drawerVisible"
      direction="rtl"
      :before-close="handleClose"
    >
      <el-form
        :model="mappForm"
        :rules="mappFormRules"
        ref="setListQuery"
        size="small"
        :inline="true"
      >
        <el-form-item
          required
          style="display: block"
          :label="$t('点位名/巡检对象名称') + '：'"
        >
          <el-input
            v-model="mappForm.port"
            :placeholder="$t('请输入')"
            clearable
            size="medium"
            style="width: 190px"
          />
        </el-form-item>
      </el-form>
    </el-drawer> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      tcpSwitch: true,
      setListQuery: {
        port: "",
        address: "",
        maxNum: "",
      },
      setListRules: {
        port: [
          {
            required: true,
            message: this.$t("端口号不能为空"),
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: this.$t("站地址不能为空"),
            trigger: "blur",
          },
        ],
        maxNum: [
          {
            required: true,
            message: this.$t("最大连接数不能为空"),
            trigger: "blur",
          },
        ],
      },
      editFlag: true,
      listQuery: {
        deviceName: "",
        dataType: "",
        pointNumber: "",
        mappTyle: "",
      },
      dataTypeList: [
        {
          value: "all",
          label: "所有",
        },
      ],
      mappList: [
        {
          value: "all",
          label: "所有",
        },
      ],
      tableData: [],
      total: 0,
      drawerVisible: false,
      mappForm: {},
      mappFormRules: {},
    };
  },
  mounted() {},
  methods: {
    // 编辑配置
    editBtn() {
      this.editFlag = false;
    },
    //保存配置
    saveBtn() {
      this.editFlag = true;
    },
    //取消配置
    cancelBtn() {
      this.editFlag = true;
    },
    //映射表 搜索按钮
    serachBtn() {},
    //映射表 重置按钮
    resetFormBtn() {},
    //搜索
    handleQuery() {},
    //编辑映射表
    editRow() {},
    getTableList() {},
    handleClose() {
      this.drawerVisible = false;
    },
    //新增映射表
    addMap() {
      this.drawerVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .el-form-item__label {
    color: #a6acb1 !important;
  }
  .el-input-number__increase,
  .el-input-number__decrease {
    display: none;
  }
  .el-icon-arrow-down:before,
  .el-icon-arrow-up:before {
    color: #fff;
  }
  .el-input {
    input {
      text-align: left;
    }
  }
}
</style>
